<template>
	<view :style="{'--color':vuex_config.themeColor1}" class="page_main">
		<view class="main_item" v-for="(item,index) in dataList" :key="index">
			<view class="list_item">
				<view class="row_item">
					<view class="label">自评：</view>
					<view class="val">{{item.self_evaluation}}</view>
				</view>
				<view class="row_item">
					<view class="label">老师评分：</view>
					<view class="val">{{item.teacher}}</view>
				</view>
				<view class="row_item">
					<view class="label">家长评分：</view>
					<view class="val">{{item.parent}}</view>
				</view>
			</view>
			<view class="time_box">
				创建时间：<text class="text">{{item.date_creation | timeFilter()}}</text>
			</view>
		</view>
		<sww-load-more :params="{ ...dataListParams }"></sww-load-more>

		<view class="fix_bot_main">
			<view class="fixed_bottom_btn">
				<view class="word" @click="toSetScore">添加评分</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js'
	import {
		formatDate
	} from '@/utils/moment/index.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				enrollUser: null,
				infoId: null,
				showInit:false
			}
		},
		filters: {
			timeFilter(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss')
			}
		},
		onLoad(options) {
			if (options && options.enroll_user_id) {
				this.enrollUser = Number(options.enroll_user_id)
				this.infoId = Number(options.infoId)
				this.init()
			}
		},
		onShow () {
			if(this.showInit){
				this.init()
			}else{
				this.showInit = true
			}
		},
		onReachBottom() {
			this._load_data()
		},
		methods: {
			init() {
				this._init_data('GetEnrollGradeList', {
					pk_id: this.enrollUser
				})
			},
			toSetScore() {
				this.$linkTo(
					`/package/enroll/user/score/scoreAdd?infoId=${this.infoId}&enroll_users_id=${this.enrollUser}`)
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $www-theme-bg;
	}
</style>
<style lang="scss" scoped>
	.page_main{
		padding-top: 20rpx;
	}
	.main_item {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 10rpx;
		padding: 10rpx 20rpx 16rpx;
	}

	.list_item {
		display: flex;
		flex-wrap: wrap;

		.row_item {
			padding: 6rpx 0;
			font-size: 26rpx;
			width: 50%;
			display: flex;

			.val {
				flex: 1;
				overflow: hidden;
				color: #999;

				&.act {
					color: #2440C4;

					&:active {
						text-decoration: underline;
					}
				}
			}
		}
	}
	.time_box{
		font-size: 26rpx;
		.text{
			color: #999;
		}
	}
</style>
